<template>
	<!-- 招商加盟 -->
	<view class="app">
		<!-- 内容列表 -->
		<mescroll-body :sticky="true" top="0" down="120" :bottombar="false" @init="mescrollInit" :down="downOption"
			@down="downCallback" :up="upOption" @up="upCallback">
			<!-- 吸顶搜索栏 -->
			<view class="top-bar sticky-tabs">
				<u-icon class="icon" name="arrow-left" color="#eee" size="64" @click="vk.navigateBack"></u-icon>
				<view class="search-bar">
					<u-search placeholder="招商加盟搜索" v-model="keyword" :show-action="false" shape="square"
						@search="search"></u-search>
				</view>
				<u-icon class="icon" name="list-dot" color="#eee" size="64" @click="toMore()"></u-icon>
			</view>

			<!-- 筛选条件 -->
			<view class="tabs-bar">
				<view class="bar1">
					<zero-filter-bar ref="zeroFilterBar" :needSticky="false" selectColor="orange" :extraBtn="false"
						:dataList="tabs" @filter='changeFilter'></zero-filter-bar>
				</view>
				<view class="bar2">
					<u-checkbox @change="changeRecommend" v-model="recommend" active-color="orange">
						<text :class="recommend?'active':''">推荐</text>
					</u-checkbox>
				</view>
			</view>

			<!-- 数据列表 -->
			<view class="grid-bar">
				<view class="grid-item2 grid-text-item" v-for="(item, index) in dataList" :key="index"
					@click="toDetail(item.id)">
					<image class="" :src="item.images" mode="aspectFit"></image>
					<view class="text2 row">
						<view class="row">
							<u-icon class="icon" name="eye" color="#333" size="24" @click=""></u-icon>
							{{item.pv}}浏览
						</view>
						<view class="row row-end">
							<u-icon class="icon" name="chat" color="#333" size="24" @click=""></u-icon>
							{{item.noc}}留言
						</view>
					</view>
					<text class="title text common-text">{{item.title}}</text>
				</view>
			</view>
		</mescroll-body>
		<u-tabbar :list="vk.getVuex('$tabbar')"></u-tabbar>
	</view>
</template>

<script>
	import config from "@/app.config.js";
	import JOIN from "@/data/goods.js";

	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin], // 下拉刷新和上拉加载的组件
		data() {
			return {
				disabled: false,
				loading: false,

				keyword: '', // 关键字

				// 筛选条件
				tabs: [{
					id: 1,
					name: '综合',
					sort: true,
				}, {
					id: 2,
					name: '留言'
				}, {
					id: 3,
					name: '人气'
				}, {
					id: 4,
					name: '评论'
				}],
				current: 0,
				sort: 1, // 1正序 -1倒序
				recommend: false,
				checked: false, // 未使用

				dataList: [],

				downOption: {
					auto: false, //是否在初始化后,自动执行上拉回调callback; 默认true					
				},
				upOption: {
					auto: true, //是否在初始化后,自动执行上拉回调callback; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 12 // 每页数据的数量
					},
					noMoreSize: 8, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					textNoMore: '没有更多数据',
					empty: {
						tip: '~ 搜索无结果 ~', // 提示
						btnText: ''
					}
				},
			}
		},
		onLoad(options = {}) {
			this.initPage(options);
		},
		onShow() {
			// #ifdef H5
			this.$nextTick(() => {
				// #endif
				// this.mescroll && this.mescroll.resetUpScroll();
				// #ifdef H5
			})
			// #endif
		},
		methods: {
			// 点击了搜索
			search() {
				this.mescroll.resetUpScroll();
			},
			changeFilter(index, desc, item) {
				// console.log(index,desc,item)
				vk.pubfn.debounce(() => {
					this.current = index;
					this.sort = desc ? -1 : 1;
					this.mescroll.resetUpScroll();
				}, 1000);
			},
			changeRecommend(e) {
				vk.pubfn.debounce(() => {
					this.recommend = e.value;
					this.mescroll.resetUpScroll();
				}, 1000);
			},
			initPage(options = {}) {

			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			toMore() {
				vk.toast('无功能');
			},
			refresh() {
				this.mescroll.resetUpScroll();
			},
			toDetail(id) {
				this.pageTo(`./detail?id=${id}`)
			},
			// 下拉刷新
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			// 底部上划，获取列表
			upCallback(page) {
				console.log('筛选条件', this.current, this.sort);
				console.log('是否推荐', this.recommend);
				console.log('关键字', this.keyword);

				// 模拟1秒
				setTimeout(() => {
					let all = vk.pubfn.copyObject(JOIN).filter(item => item.title.indexOf(this.keyword) >= 0);
					let list = all;
					if (this.current == 0) list.sort((a, b) => (a.id - b.id) * this.sort); // 综合
					else if (this.current == 1) list.sort((a, b) => a.noc - b.noc); // 留言
					else if (this.current == 2) list.sort((a, b) => a.pv - b.pv); // 人气
					else if (this.current == 3) list.sort((a, b) => a.noc - b.noc); // 评论

					if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
					this.dataList = this.dataList.concat(list); //追加新数据

					if (config.debug) console.log('招商加盟列表', this.dataList)

					//方法二(推荐): 当前页数据长度curPageLen, 后台接口有返回列表的总数据量 totalSize
					this.mescroll.endBySize(list.length, JOIN.length);
				}, 1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.grid-item2 {
		padding: 40rpx 20rpx;
		height: 500rpx;
	}
	
	.grid-item2 image {
		margin: auto;
		// width: 260rpx;
		height: 280rpx;
	}
</style>